<template>
  <div class="field-select">
    <div class="field-select__type">
      <el-select v-model="subItem.fieldType" placeholder="请选择" filterable
        @change="handleChangeFieldType">
        <el-option v-for="item in conditionTypeOptions" :key="item.value" :label="item.label"
          :value="item.value" />
      </el-select>
    </div>
    <div class="field-select__text">
      <el-select v-if="subItem.fieldType === 1" v-model="subItem.field"
        @change="handleChangeFieldName" placeholder="请选择" filterable>
        <el-option v-for="item in usedFormItems" :key="item.__vModel__"
          :label="item.__config__.label" :value="item.__vModel__">
        </el-option>
      </el-select>
      <el-select v-if="subItem.fieldType === 2" v-model="subItem.field"
        @change="handleChangeBuiltField" placeholder="请选择" filterable>
        <el-option v-for="item in builtOptions" :key="item.value" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-input v-if="subItem.fieldType === 3" placeholder="公式编辑" disabled>
        <template slot="append">
          <el-button size="mini" type="primary" @click="handleFormulaEdit">
            <i class="el-icon-edit"></i>
          </el-button>
        </template>
      </el-input>
      <el-select v-if="subItem.fieldType === 4" v-model="subItem.field"
        @change="handleChangeApproverField" placeholder="请选择" filterable>
        <el-option v-for="item in approverOptions" :key="item.value" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-if="subItem.fieldType === 5" v-model="subItem.field"
        @change="handleChangeSqlAndHttpField" placeholder="请选择" filterable>
        <el-option v-for="item in sqlAndHttpOptions" :key="item.value" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-if="subItem.fieldType === 6" v-model="subItem.field"
        @change="handleChangeParamsField" placeholder="请选择" filterable>
        <el-option v-for="item in paramsOptions" :key="item.value" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

    </div>
    <!-- 公式计算 -->
    <FormulaDialog :visible.sync="formulaVisible" :value="subItem.field"
      @updateFormula="updateFormula" :formFieldsOptions="formFieldsOptions" />
  </div>
</template>

<script>
import FormulaDialog from './formulaDialog'

const CONDITION_TYPE_OPTIONS = [
  {
    label: '字段',
    value: 1
  },
  {
    label: '内置字段',
    value: 2
  },
  {
    label: '公式',
    value: 3
  },
  {
    label: '内置参数',
    value: 6
  }
]

const APPROVER_TYPE_ITEM = {
  label: '来自审批节点',
  value: 4
}

const SQL_AND_HTTP_TYPE_ITEM = {
  label: '来自SQL/HTTP节点',
  value: 5
}

export default {
  name: 'FieldSelect',
  components: { FormulaDialog },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    usedFormItems: {
      type: Array,
      default: () => []
    },
    formFieldsOptions: {
      type: Array,
      default: () => []
    },
    builtOptions: {
      type: Array,
      default: () => []
    },
    prevNodeIsApproverNode: {
      type: Boolean,
      default: false
    },
    approverOptions: {
      type: Array,
      default: () => []
    },
    prevNodeIsSqlAndHttp: {
      type: Boolean,
      default: false
    },
    sqlAndHttpOptions: {
      type: Array,
      default: () => []
    },
    paramsConfig: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formulaVisible: false,
    }
  },
  computed: {
    subItem: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    conditionTypeOptions() {
      const options = [...CONDITION_TYPE_OPTIONS];
      if (this.prevNodeIsApproverNode) {
        options.push(APPROVER_TYPE_ITEM)
      }
      if (this.prevNodeIsSqlAndHttp) {
        options.push(SQL_AND_HTTP_TYPE_ITEM)
      }
      return options
    },
    paramsOptions() {
      return this.paramsConfig.map(item => ({
        label: item.field,
        value: item.field
      }))
    }
  },
  methods: {
    handleFormulaEdit() {
      this.formulaVisible = true;
    },
    handleChangeFieldType() {
      this.subItem.field = ''
      this.subItem.fieldName = ''
      this.subItem.jnpfKey = ''
      this.subItem.fieldValue = ''
      this.subItem.symbol = ''
    },
    handleChangeFieldName(val) {
      const obj = this.usedFormItems.filter(o => o.__vModel__ == val)[0]
      this.subItem.fieldName = obj.__config__.label
      this.subItem.jnpfKey = obj.__config__.jnpfKey
      if (["modifyTime", "createTime"].includes(obj.__config__.jnpfKey) && !obj.format) {
        obj.format = 'yyyy-MM-dd HH:mm:ss'
      }
      this.subItem.fieldValue = undefined
      this.subItem.fieldLabel = ''
      this.subItem.fieldValueJnpfKey = ''
      this.subItem.symbol = ''
      this.subItem = { ...this.subItem, ...obj }
    },
    handleChangeBuiltField(val) {
      const obj = this.builtOptions.find(o => o.value == val);
      this.subItem.fieldName = obj.label
      this.subItem.jnpfKey = obj.jnpfKey
      this.subItem.fieldValue = undefined
      this.subItem.fieldLabel = ''
      this.subItem.fieldValueJnpfKey = ''
      this.subItem.symbol = ''
      if (obj.format) {
        this.subItem.format = obj.format
      }
    },
    handleChangeApproverField(val) {
      const obj = this.approverOptions.find(o => o.value == val);
      this.subItem.fieldName = obj.label
      this.subItem.jnpfKey = obj.jnpfKey
      this.subItem.fieldValue = undefined
      this.subItem.fieldLabel = ''
      this.subItem.fieldValueJnpfKey = ''
      this.subItem.symbol = ''
    },
    handleChangeSqlAndHttpField(val) {
      const obj = this.sqlAndHttpOptions.find(o => o.value == val);
      this.subItem.fieldName = obj.label
      this.subItem.jnpfKey = obj.jnpfKey
      this.subItem.fieldValue = undefined
      this.subItem.fieldLabel = ''
      this.subItem.fieldValueJnpfKey = ''
      this.subItem.symbol = ''
    },
    handleChangeParamsField(val) {
      const obj = this.paramsConfig.find(o => o.field == val);
      this.subItem.fieldName = obj.field
      this.subItem.jnpfKey = obj.jnpfKey
      this.subItem.fieldValue = undefined
      this.subItem.fieldLabel = ''
      this.subItem.fieldValueJnpfKey = ''
      this.subItem.symbol = ''
      if (obj.format) {
        this.subItem.format = obj.format
      }
    },
    updateFormula(formula) {
      this.subItem.field = formula
      this.subItem.fieldName = formula
    },
  }
}
</script>

<style lang="scss" scoped>
.field-select {
  display: flex;
  align-items: center;
  &__type {
    width: 180px;
  }
  &__text {
    flex: 1;
  }

  ::v-deep .el-input,
  .el-select,
  .el-input-number {
    width: 100%;
  }
}
</style>
